<template>
	<div v-if="income" class="user_box">
		<div class="user_box-top">
			<!-- 头像 -->
			<div class="user-top">
				<img class="set" src="../../images/mine/icon_set.png" alt="" @click="goSetup"> 
				<!-- 头像 -->
				<img class="user-head" v-if="avatar_url" :src="avatar_url" alt="" />
				<img class="user-head" v-else src="../../images/mine/head.png" alt="" />

				<!-- 信息 -->
				<div class="user-data">
					<div class="user-data-name">
						<div class="user-data-name_label">{{ income.nickname }}</div>
						<!-- <img v-if="income.level_icon" class="user-data-level" :src="income.level_icon" alt="" /> -->
					</div>
					<div class="user-data-invite">
						<i style="font-style: normal;" v-if="isShow">邀请码:{{ invite_code }}</i>
						<span @click="copyText" v-if="isShow">复制</span><span @click="isShow = !isShow">{{
							isShow ? "隐藏" : "显示邀请码"
							}}</span>
					</div>
				</div>
			</div>
			<!-- 余额 -->
			<div class="user-amount top">
				<div class="money-box">
					<div class="money-li" @click="getWithdrawal">
						<div class="money-li__value">{{ income.balance }}</div>
						<div class="money-li__label">我的余额</div>
					</div>
					<div class="money-li center" @click="getConsumption(2)">
						<div class="money-li__value">{{income.credit}}</div>
						<div class="money-li__label">授信额度</div>
					</div>
					<div class="money-li" @click="getConsumption(1)">
						<div class="money-li__value">{{income.integral }}</div>
						<div class="money-li__label">我的积分</div>
					</div>
				</div>
			 </div>
			 <div class="user-amount">
				<div class="money-box">
					<div class="money-li">
						<div class="money-li__value">{{ income.income_today }}</div>
						<div class="money-li__label">今日收益</div>
					</div>
					<div class="money-li center">
						<div class="money-li__value">{{ income.income_yesterday }}</div>
						<div class="money-li__label">昨日收益</div>
					</div>
					<div class="money-li">
						<div class="money-li__value">{{ income.income_total }}</div>
						<div class="money-li__label">总计收益</div>
					</div>
				</div>
			 </div>
			<!-- <div :style="{
				background: `url(${levelConfig.bg}) no-repeat center`,
				color: levelConfig.color
			}" class="user-amt">
				<div :style="{
					background: levelConfig.levelBtnBg,
					color: levelConfig.levelBtnTextColor
				}" class="user-amt-level">
					当前级别：{{ income.level_name }}
				</div>

				<div class="user-amt-balance">
					<div class="user-amt-balance-label">余额(元)</div>
					<div class="user-amt-balance-val">{{ income.balance_total }}</div>
				</div>

				<div class="user-amt-withdrawal" :style="{
					background: levelConfig.levelBtnBg,
					color: levelConfig.levelBtnTextColor
				}" @click="getWithdrawal">提现</div>

				<div class="money-box">
					<div class="money-li">
						<div class="money-li__value">{{ income.income_today }}</div>
						<div class="money-li__label">今日收益</div>
					</div>
					<div class="money-li center">
						<div class="money-li__value">{{ income.income_yesterday }}</div>
						<div class="money-li__label">昨日收益</div>
					</div>
					<div class="money-li">
						<div class="money-li__value">{{ income.income_total }}</div>
						<div class="money-li__label">总计收益</div>
					</div>
				</div>
			</div> -->

		</div>

		<!--  -->
		<!-- 我的订单 -->
		<div class="user-order">
			<div class="user-order-top">
				<div class="user-order-top__label">我的订单</div>
				<div plain type="primary" class="user-order-top__btn" @click="getorder(0)">
					全部订单
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="order-box">
				<div class="order-li" @click="getorder(1)">
					<img class="order-li__value" src="../../images/mine/icon_daifu.png" alt="" />
					<div class="order-li__label">待付款</div>
				</div>
				<div class="order-li center" @click="getorder(2)">
					<img class="order-li__value" src="../../images/mine/icon_daishou.png" alt="" />
					<div class="order-li__label">待收货</div>
				</div>
				<div class="order-li" @click="getorder(3)">
					<img class="order-li__value" src="../../images/mine/icon_wancheng.png" alt="" />
					<div class="order-li__label">已完成</div>
				</div>
				<div class="order-li" @click="getorder(4)">
					<img class="order-li__value" src="../../images/mine/icon_quxiao.png" alt="" />
					<div class="order-li__label">已取消</div>
				</div>
				<div class="order-li" @click="getReturnOrRefund">
					<img class="order-li__value" src="../../images/mine/icon_shouhou.png" alt="" />
					<div class="order-li__label">售后</div>
				</div>
			</div>
		</div>
		<div class="empty_box"></div>

		<!-- 我的服务 -->
		<div class="service-box" >
			<!-- <div class="service-box-title">我的服务</div> -->
			<div class="service-box-ul">
				<div @click="getConsumptionRecord" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_xfjl.png">
					<div class="service-box-li-name">消费记录</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getProfitCore" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_syzx.png">
					<div class="service-box-li-name">收益中心</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getConsumptionWater" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_wdsd.png">
					<div class="service-box-li-name">我的水袋</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">

				</div>
				<div @click="getMyteam" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_wdtd.png">
					<div class="service-box-li-name">我的团队</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getAgent" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/icon_dlscx.png">
					<div class="service-box-li-name">代理查询</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div v-if="view_agent_data!=0" @click="getAuthData" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/icon_sqsj.png">
					<div class="service-box-li-name">股东数据</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">

				</div> 
				<div @click="handleToKefu" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_gfkf.png">
					<div class="service-box-li-name">官方客服</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getInviteFriend" class="service-box-li last-li"  style="margin-bottom: 0;">
					<img class="service-box-li-icon" src="../../images/mine/icon_yqhy.png">
					<div class="service-box-li-name">邀请好友</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<!-- <div @click="getShopSettle" class="service-box-li last-li" style="margin-bottom: 0;">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon6.png">
					<div class="service-box-li-name">门店入驻</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">

				</div> -->
				<!-- <div @click="getMyPrivate" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/pofit-icon-6.png">
					<div class="service-box-li-name">我的私域</div>
				</div> -->
				<!-- <div @click="handleToxiaofei" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon10.png">
					<div class="service-box-li-name">现金消费券</div>
				</div> -->
				<!-- <div @click="getConsumption(1)" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon11.png">
					<div class="service-box-li-name">消费金</div>
				</div>
				<div @click="getConsumption(2)" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon12.png">
					<div class="service-box-li-name">花朵</div>
				</div>
				<div @click="getRedEnvelope(1)" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon13.png">
					<div class="service-box-li-name">红包</div>
				</div>


				<div @click="getShopSettle" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon6.png">
					<div class="service-box-li-name">门店入驻</div>
				</div> -->
				<!-- <div 
				@click="getMerchantSettle"
				class="service-box-li last-li" >
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon7.png" >
					<div class="service-box-li-name" >商家入驻</div>
				</div>
				<div @click="goSetup" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon8.png">
					<div class="service-box-li-name">系统设置</div>
				</div> -->
			</div>

		</div>



		<footTab :current="3" style="z-index: 9999;"></footTab>
	</div>
</template>

<script>
import {
	USERDETAIL
} from "@/api/mine";
import footTab from "@/components/foot-tab";
import {
	mineLevel1,
	mineLevel2,
	mineLevel3,
	mineLevel4,
	mineLevel5,
	mineLevel6,
	mineLevel7,
	mineLevel8,
} from '@/tool/static-img';
import {formatSubsidy} from '@/tool/methods'
export default {
	components: {
		footTab
	},
	data() {
		return {
			mineLevel1,
			mineLevel2,
			mineLevel3,
			mineLevel4,
			mineLevel5,
			mineLevel6,
			mineLevel7,
			mineLevel8,
			nickname: "",
			avatar_url: "",
			invite_code: "",
			account: "",
			uid: '',
			level: 0, // 用户级别
			isShow: true,
			income: null,
			view_agent_data:null
		};
	},
	computed: {
		levelConfig() {
			switch (this.level) {
				case 0:
					return {
						bg: mineLevel1,
						levelBtnBg: '#46606A',
						levelBtnTextColor: '#FFFFFF',
						color: '#46606A'
					};
					break;
				case 1:
					return {
						bg: mineLevel2,
						levelBtnBg: '#32647B',
						levelBtnTextColor: '#FFFFFF',
						color: '#2E5E75'
					};
					break;
				case 2:
					return {
						bg: mineLevel3,
						levelBtnBg: '#466A51',
						levelBtnTextColor: '#FFFFFF',
						color: '#3B5E46'
					};
					break;
				case 3:
					return {
						bg: mineLevel4,
						levelBtnBg: '#986D3E',
						levelBtnTextColor: '#FFFFFF',
						color: '#694926'
					};
					break;
				case 103:
					return {
						bg: mineLevel5,
						levelBtnBg: '#6A3F38',
						levelBtnTextColor: '#FFFFFF',
						color: '#6A3F38'
					};
					break;
				case 102:
					return {
						bg: mineLevel6,
						levelBtnBg: '#402C82',
						levelBtnTextColor: '#FFFFFF',
						color: '#402C82'
					};
					break;
				case 101:
					return {
						bg: mineLevel7,
						levelBtnBg: '#FFFFFF',
						levelBtnTextColor: '#262B55',
						color: '#FFFFFF'
					};
					break;
				case 100:
					return {
						bg: mineLevel8,
						levelBtnBg: '#FFFFFF',
						levelBtnTextColor: '#7A1000',
						color: '#FFFFFF'
					};
					break;
			}
		}
	},
	activated() {
        // 当组件被激活时，重新加载数据
        // this.fetchData();
		document.title = '我的';
		this.getMine()
		
      },
	created() {
		// window.scrollTop(0, 0)

	},
	mounted() {
		// this.getMine()
	},
	methods: {
		getMine(){
			if (!this.isLogin()) {
			return;
		}

		this.$http.get('/store/manage/list')


		this.$http.get(USERDETAIL).then((res) => {
			this.income = res.data;
			this.income.balance=formatSubsidy(this.income.balance)
			this.income.credit=formatSubsidy(this.income.credit)
			this.income.integral=formatSubsidy(this.income.integral)
			this.income.income_today=formatSubsidy(this.income.income_today)
			this.income.income_yesterday=formatSubsidy(this.income.income_yesterday)
			this.income.income_total=formatSubsidy(this.income.income_total)

			this.invite_code = res.data.invite_code;
			this.nickname = res.data.nickname;
			this.uid = res.data.uid;
			this.avatar_url = res.data.avatar_url;
			this.account = res.data.account;
			this.level = res.data.level;
			this.view_agent_data=res.data.view_agent_data
		});
		// window.scrollTo(0, 0)
		localStorage.removeItem('profit')
		},
		// 是否登录
		isLogin() {
			const token = localStorage.getItem("token");
			if (!token) {
				this.$router.push({
					name: "login",
				});
				return false;
			}

			return true;
		},
		// 复制文本
		//     copyText() {
		//   navigator.clipboard.writeText(this.invite_code).then(() => {
		//     // Toast('复制成功');
		//     this.$toast("复制成功")
		//   }).catch(err => {
		//     this.$toast("复制失败")
		//     // Toast('复制失败');
		//   });
		// },
		copyText(text) {
			// 创建一个临时的输入元素
			const input = document.createElement('input');
			input.value = this.invite_code;
			document.body.appendChild(input);
			// 选择输入框中的文本
			input.select();
			input.setSelectionRange(0, 99999); // 对于移动设备

			// 执行复制命令
			document.execCommand('copy');

			// 移除临时输入框
			document.body.removeChild(input);
			this.$toast("复制成功")
		},
		// 提现
		getWithdrawal() {
			this.$router.push({
				path: '/consumptionGold',
				query: {
					id: 3
				}
			})
			// this.$router.push({
			// 	path: "/withdrawal"
			// });
		},
		// 设置
		goSetup() {
			// console.log(11);
			this.$router.push({
				path: "/setup",
				// query:{
				//   account:this.account,
				//   avatar_url:this.avatar_url,
				//   nickname:this.nickname
				// }
			});
		},
		// 订单
		getOrder(id) {
			this.$router.push({
				path: "/orderList",
				query: {
					id: id,
				},
			});
		},
		// 待付款
		getorder(id) {
			this.$router.push({
				path: "/order",
				query: {
					id: id,
				},
			});
		},
		// 待发货
		getorder(id) {
			this.$router.push({
				path: "/order",
				query: {
					id: id,
				},
			});
		},
		//订单
		getorder(id) {
			this.$router.push({
				path: "/orderList",
				query: {
					id: id,
				},
			});
		},
		// 售后
		getReturnOrRefund() {
			this.$router.push({
				path: "/returnOrRefund",
			});
		},
		// 消费记录
		getConsumptionWater(){
			this.$router.push({
			    name:'myWater'
			})
		},
		getConsumptionRecord() {
			this.$router.push({
				path: "/consumptionRecord",
			});
		},
		// 收益中心
		getProfitCore() {
			this.$router.push({
				path: "/profitCore",
				// query: {
				//   subsidy: this.income.subsidy,
				//   bonus_hhr: this.income.bonus_hhr,
				//   bonus_zj: this.income.bonus_zj,
				//   balance: this.income.balance,
				//   level_name: this.income.level_name,
				// },
			});
			// localStorage.setItem("profit", JSON.stringify(this.income))
		},
		// 我的团队
		getMyteam() {
			this.$router.push({
				path: "/myteam",
			});
		},
		//代理商查询
		getAgent(){
			this.$router.push({
				path: "/agentQuery",
			});
		},
		// 我的私域
		getMyPrivate(){
			this.$router.push({
				path: "/myPrivate",
			});
		},
		// 商家入驻
		getMerchantSettle() {
			this.$router.push({
				path: "/merchantList",
			});
			// this.$router.push({
			// 	path: "/merchantSettle",
			// });
		},

		// 邀请好友
		getInviteFriend() {
			this.$router.push({
				path: "/invite",
			});
		},
		// 客服
		handleToKefu() {
			const fromUrl = window.location.href;

			const clientId = this.uid;
			if (clientId && this.nickname) {
				// 用户
				const otherParams = JSON.stringify({
					"nickName": this.nickname
				})
				window.location.href =
					`https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&clientId=${clientId}&otherParams=${otherParams}&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			} else {
				// 游客
				window.location.href =
					`https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			}
		},
		//授权数据
		getAuthData(){
			this.$router.push({
			    name:'authData',
				query:{
					level:1
				}
			})
		},
		// 优惠券
		handleToxiaofei(){
			this.$router.push({
			    name:'consumption'
			})
		},
		// 我的水袋
		getConsumption(id){
			this.$router.push({
			    name:'consumptionGold',
				query:{
					id
				}
			})
		},
		//红包
		getRedEnvelope(id){
		    this.$router.push({
		        name:'redEnvelope',
				query:{
					id:id
				}
		    })
		}

	},

};
</script>

<style lang="scss" scoped>
.user_box {
	min-height: calc(100vh - 46px);
	background-color: #f5f5f5;
	padding-bottom: calc(1.3rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
}

.user_box-top {
	background-color: #FFFFFF;
}

.user-top {
	background: url("../../images/mine/img_beij.png") no-repeat center;
	background-size: cover;
	height: 4.6rem;
	padding: 0.4rem;
	padding-top: .8rem;
	display: flex;
	flex-wrap: nowrap;
	color: #fff;
	box-sizing: border-box;
	.set{
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		width: .48rem;
		height: .48rem;
	}
	.user-head {
		width: 1.08rem;
		height: 1.08rem;
		border-radius: 50%;
		margin-top: 0.16rem;
		margin-left: 0.12rem;
	}

	.user-data {
		margin-left: 0.24rem;
		line-height: 0.5rem;
		margin-top: 0.16rem;

		.user-data-name {
			display: flex;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 0.36rem;
			color: #ffffff;
			line-height: .5rem;
			text-align: left;
			font-style: normal;

			// display: flex;
			&_label {
				max-width: 3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 0.04rem;
			}

			.user-data-level {
				width: 1.3rem;
				// margin-top:.2rem;
				vertical-align: middle;
				// padding: 0.04rem 0.2rem;
				font-size: 0.28rem;
				font-weight: 500;
				border-radius: 0.05rem;
				margin-left: 0.15rem;
			}
		}

		.user-data-invite {
			font-size: 0.24rem;
			// margin-top: 0.2rem;

			// margin-right: 0.1rem;

			span {
				padding: 0.03rem 0.04rem;
				font-size: 0.24rem;
				opacity: 0.6;
				border-radius: 0.05rem;
				margin-left: 0.1rem;
				text-decoration-line: underline;
				color: #fff;
			}
		}
	}

	// .van-icon {

	// }
	.user-set {
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		width: 0.48rem;
		height: 0.48rem;
		margin-top: -0.1rem;
		margin-right: -0.1rem;
	}
}

// 余额
.user-amt {
	position: relative;
	width: 7.02rem;
	height: 3.82rem;
	padding-top: 1.54rem;
	margin: auto;
	margin-top: -1.66rem;
	background-size: cover !important;
	box-sizing: border-box;

	.user-amt-level {
		position: absolute;
		top: 0.74rem;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 0.48rem;
		min-width: 2rem;
		font-weight: 500;
		font-size: 0.24rem;
		padding: 0 0.16rem;
		border-radius: 0.16rem 0 0.16rem 0;
		background-color: #466A51;
		box-sizing: border-box;
	}

	.user-amt-balance {
		display: flex;
		height: 0.6rem;

		.user-amt-balance-label {
			height: 0.34rem;
			margin-right: 0.2rem;
			margin-left: 0.36rem;
			margin-top: 0.2rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			font-weight: 400;
		}

		.user-amt-balance-val {
			height: 0.6rem;
			line-height: 0.6rem;
			font-weight: 500;
			font-size: 0.44rem;

			&::before {
				content: '￥';
				font-size: 0.32rem;
				font-weight: 500;
				height: 0.44rem;
				line-height: 0.44rem;
			}
		}
	}

	.user-amt-withdrawal {
		position: absolute;
		bottom: 0.58rem;
		right: 0.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.36rem;
		height: 0.56rem;
		font-size: 0.28rem;
		font-weight: 500;
		border-radius: 0.3rem;
	}


}

.user-amount{
	width: 95%;
	margin: 0 auto;
	height: 1.92rem;
	background: url('../../images//mine/img_amt.png') no-repeat center;
	background-size: cover;
	.money-box {
		display: flex;
		justify-content: space-between;
		// margin-left: 0.04rem;
		padding-top: .5rem;
		margin-top: -1rem;
		color: #FFDFB0;

		.money-li {
			width: 33%;
			text-align: center;

			&.center {
				position: relative;

				&::before {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					width: 0.02rem;
					height: 0.5rem;
					background: rgba(255,243,212,0.2);
				}

				&::after {
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					width: 0.02rem;
					height: 0.5rem;
					background: rgba(255,243,212,0.2);
				}
			}

			&__value {
				height: 0.44rem;
				margin-bottom: 0.08rem;
				line-height: 0.44rem;
				font-weight: 500;
				font-size: 0.32rem;
			}

			&__label {
				height: 0.34rem;
				line-height: 0.34rem;
				font-size: 0.24rem;
			}
		}
	}

}
.top{
	background: transparent ;
	margin-bottom: .7rem ;
	margin-top: -2.7rem;
	.money-box{
		color: #fff;
	}
}
// 我的订单
.user-order {
	padding: 0.44rem 0.32rem 0.32rem;
	box-sizing: border-box;
	background-color: #fff;

	.user-order-top {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 0.16rem;

		&::before {
			content: '';
			width: 6.96rem;
			height: 1px;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #F2F4F5;
			transform: scaleY(0.5);
		}

		.user-order-top__label {
			height: 0.44rem;
			line-height: 0.44rem;
			font-size: 0.32rem;
			font-weight: 500;
			color: #333333;
		}

		.user-order-top__btn {
			display: flex;
			align-items: center;
			height: 0.34rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			color: #666666;
		}
	}

	.order-box {
		display: flex;
		justify-content: space-between;
		height: 1.2rem;
		padding: 0 0.26rem;
		margin-top: 0.18rem;

		.order-li {
			display: flex;
			justify-content: space-around;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			&__value {
				width: 0.72rem;
				height: 0.72rem;
				margin-bottom: 0.12rem;
				font-family: Arial;
				font-size: 0.3rem;
				font-weight: 400;
				color: #333333;
			}

			&__label {
				height: 0.34rem;
				line-height: 0.34rem;
				font-family: PingFang SC;
				font-size: 0.24rem;
				font-weight: 400;
				color: #333333;
			}
		}
	}
}

.empty_box {
	height: 0.24rem;
	background: #f2f4f5;
}

.service-box {
	width: 100%;
	background-color: #FFFFFF;

	.service-box-title {
		height: 0.44rem;
		line-height: 0.44rem;
		font-weight: 500;
		font-size: 0.32rem;
		padding: 0.28rem 0.56rem 0.4rem;
		color: #333333;
	}

	.service-box-ul {
		// display: flex;
		// flex-wrap: wrap;
		padding: 0.32rem 0.36rem;
		// position: relative;
		// z-index: 1;
		.service-box-li {
			width: 100%;
			margin-bottom: 0.4rem;
			display: flex;
			align-items: center;
			position: relative;
			&.last-li {
				margin-bottom: 0.32rem;
			}
			.arrow_icon{
				width: .32rem;
				height: .32rem;
				position: absolute;
				right: .0rem;
				top: 50%;
				transform: translateY(-50%);
			}
			.service-box-li-icon {
				display: block;
				// margin: auto;
				width: 0.4rem;
				height: 0.4rem;
				// margin-bottom: 0.16rem;
				margin-right: .24rem;
			}

			.service-box-li-name {
				height: 0.34rem;
				line-height: 0.34rem;
				font-size: 0.24rem;
				text-align: center;
				color: #333333;
			}
		}
	}
}
</style>
